<!--审批界面-->

<template>
  <div>
    <div class="approveContainer" style="display: flex; flex-direction: column;">
      <div class="box3_approve">
        <h2>审批</h2>
      </div>

      <!--搜索产品-->
      <div class="box4_approve">
        <el-form :inline="true" :model="search_approve" class="demo-form-inline">
          <el-form-item label="负责人" style=" margin-top: 5px">
            <el-select v-model="search_approve.charger" placeholder="负责人/测试项目经理">
              <el-option label="测试项目经理一" value="测试项目经理一"></el-option>
              <el-option label="测试项目经理二" value="测试项目经理二"></el-option>
              <el-option label="测试项目经理三" value="测试项目经理三"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="状态" style="margin-left: 2px;  margin-top: 5px">
            <el-select v-model="search_approve.proStatus" placeholder="产品状态">
              <el-option label="已审批" value="已审批"></el-option>
              <el-option label="待审批" value="待审批"></el-option>
              <el-option label="未发起" value="未发起"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item style="margin-left: 400px;  margin-top: 5px">
            <el-button type="primary" @click="selectByChargerStatus">筛选</el-button>
            <el-button type="info" @click="drawBackSelect">取消</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!--产品信息展示——待审批和审批通过的产品-->
      <div class="box5_approve">
        <el-table class="table_pro" :data="data_approve" border stripe height="450">
          <el-table-column prop="id" label="产品ID"></el-table-column>
          <el-table-column prop="proName" label="产品名称"></el-table-column>
          <el-table-column prop="approveStatus" label="审批状态"></el-table-column>
          <el-table-column prop="charger" label="负责人"></el-table-column>
          <el-table-column prop="approval" label="审批人"></el-table-column>
          <el-table-column prop="approveDate" label="审批通过日期"></el-table-column>
          <el-table-column label="审批签名">
            <!--图片——格式还需要改一下-->
            <template v-slot="scope">
              <el-image style="width: 90px; height: 90px; padding-left: 10px" v-if="scope.row.imageUrl"
                        :src="scope.row.imageUrl" :preview-src-list="[scope.row.imageUrl]" fit="cover"></el-image>
            </template>
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="300">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="startApproval(scope.row)">发起审批</el-button>
              <el-button type="text" size="mini" @click="signApproval">签名审批</el-button>
              <el-button type="text" size="mini" @click="drawBack(scope.row)">撤销</el-button>
            </template>
          </el-table-column>

          <el-table-column
              width="100">
            <template slot-scope="scope">

              <el-button type="text" size="small" @click="uploadPic(scope.row)">上传签名</el-button>

            </template>

          </el-table-column>
        </el-table>

      </div>

      <el-dialog title="上传签名" :visible.sync="uploadPicVisible" style="width: 100%">

        <el-upload :action='uploadUrl'
                   :on-success="transferToBackend"
                   list-type="picture-card"
                   name="fileSig"

        >
          <el-button slot="trigger">选择图片</el-button>
        </el-upload>


        <div slot="footer" class="dialog-footer-2">
          <el-button @click="uploadPicVisible = false">取 消</el-button>
          <el-button type="primary" @click="uploadConfirm">确 定</el-button>
        </div>
      </el-dialog>


    </div>

  </div>

</template>


<script>


import request from "@/utils/request";

export default {
  name: "Approve",

  data() {

    return {

      uploadUrl: 'http://localhost:8080/file/uploadSignature',

      //上传签名对话框的可见行
      uploadPicVisible: false,

      //上传签名对话框中数据
      uploadOne: {},

      //审批的对话框
      deleteFormVisible: false,

      search_approve: {
        charger: '',
        proStatus: '',//状态
      },

      //审批的所有数据
      data_approve: [ //这个数据来自数据库，下面这个仅为测试数据
        //刷新页面之后从后端请求数据
      ]
    }

  },

  methods: {

    //根据负责人和状态筛选审批
    selectByChargerStatus() {/**/
      //向后端发请求，更新数据
      request.get('/approve/selectByChargerStatus?charger='
          + this.search_approve.charger
          + "&status="
          + this.search_approve.proStatus).then(res => {
        if (res.code === '200') {
          this.$message.success("更新数据成功！")
          this.data_approve = res.data
        } else {
          this.$message.error(res.msg)
        }

      })
    },


    //取消筛选
    drawBackSelect(){
      //向后端发请求，更新数据
      request.get('/approve/selectAllApprove').then(res => {
        if (res.code === '200') {
          this.$message.success("更新数据成功！")
          this.data_approve = res.data
        } else {
          this.$message.error(res.msg)
        }

      })

    },


    drawBack(row) {
      /**/
      this.uploadOne = JSON.parse(JSON.stringify(row))

      //删除
      request.post('/approve/deleteApprove', this.uploadOne).then(res => {
        if (res.code === '200') {
          this.$message.success("撤销审批成功！")

          //向后端发请求，更新数据
          request.get('/approve/selectAllApprove').then(res => {
            if (res.code === '200') {
              this.data_approve = res.data
            } else {
              this.$message.error(res.msg)
            }

          })

        } else {
          this.$message.error(res.msg)
        }

      })


    },

    //点击—发起审批
    startApproval(row) {

      this.uploadOne = JSON.parse(JSON.stringify(row))
      console.log("点击发起审批后")
      console.log(this.uploadOne)

      //如果当前选中的行状态为“未发起”，则向后台发请求，更新状态
      if (this.uploadOne.approveStatus === '未发起') {
        request.post('/approve/updateStatus', this.uploadOne).then(res => {
          if (res.code === '200') {
            this.$message.success("更新数据成功！")

            //向后端发请求，更新数据
            request.get('/approve/selectAllApprove').then(res => {
              if (res.code === '200') {
                this.data_approve = res.data
              } else {
                this.$message.error(res.msg)
              }

            })

          } else {
            this.$message.error(res.msg)
          }

        })


      } else {
        //否则：提示不要重复发起审批

        this.$message.error("不要重复发起审批")
      }

  },

  signApproval() {
    window.location.href = 'signature.html'
  },


  //点击上传签名,弹出对话框
  uploadPic(row) {
    this.uploadOne = JSON.parse(JSON.stringify(row)) //拿到当前行数据
    this.uploadPicVisible = true //弹出对话框
  },

  //对话框中，选中图片后确定上传
  uploadConfirm() {
    this.$message.success("上传成功")
    this.uploadPicVisible = false //关闭对话框
  },

  transferToBackend(response) {
    //
    this.data_approve.forEach((item, index) => {
      /*console.log(item) //表示的是每一项
      console.log(index) //表示的是数组的索引*/

      //找到data_approve中与this.uploadOne的id相同的对象，将其url改为response对应url
      if (item.id === this.uploadOne.id) {

        item.imageUrl = 'http://localhost:8080/signatureImages/' + response

        //向后端发请求，更改签名图片的url
        request.post('/approve/updateSignPic', item).then(res => {
          if (res.code === '200') {
            this.$message.success("更新签名成功！")
            //向后端发请求，请求所有审批数据
            //向后端发请求，更新数据
            request.get('/approve/selectAllApprove').then(res => {
              if (res.code === '200') {
                this.data_approve = res.data
              } else {
                this.$message.error(res.msg)
              }

            })

          } else {
            this.$message.error(res.msg)
          }

        })


      }

      console.log("更改之后data_approve的url" + index + ' : ' + item.imageUrl)
    })

  },


},

mounted(){

  //向后端发请求，更新数据
  request.get('/approve/selectAllApprove').then(res => {
    if (res.code === '200') {
      this.$message.success("更新数据成功！")
      this.data_approve = res.data
    } else {
      this.$message.error(res.msg)
    }

  })

}

}


</script>

<style scoped>

.box3_approve {
  height: 70%;
  background-color: #cccccc; /* 仅用于视觉效果 */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
  border-radius: 5px;
}

.box4_approve {
  text-align: center;
  padding-top: 20px;
}


canvas {
  border: 1px solid #ccc;
  cursor: crosshair;
}


</style>